const stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);

const setting = {
    ballNum: 40,
    isTail: "false",
    t: 0.04,
    sizeMax: 10,
};

const gui = new dat.GUI({ width: 320 });
const folder = gui.addFolder("基础");
folder.open();
const c1 = folder.add(setting, "ballNum", 10, 200, 1);
const c4 = folder.add(setting, "isTail", ["true", "false"]);
const c3 = folder.add(setting, 't', 0, 1, 0.01)

c1.onFinishChange(() => {
    clear();
    initBalls();
});

function Ball(hue, size) {
    this.start = { x: random(width), y: random(height) };
    this.pos = this.start;
    this.target = { x: width / 2, y: height / 2 };
    this.last = { x: 0, y: 0 }
    this.hue = hue;
    this.size = size;
    this.draw = () => {
        // fill(this.hue, 100, 100);
        // circle(this.pos.x, this.pos.y, this.size);
        stroke(this.hue, 100, 100)
        line(this.last.x, this.last.y, this.pos.x, this.pos.y)
    };
    this.update = () => {
        this.last = { ...this.pos }
        const mouseR = 200
        this.target.x = mouseX + sin(random(200)) * mouseR
        this.target.y = mouseY + cos(random(200)) * mouseR
        this.pos.x = this.start.x * (1 - setting.t) + this.target.x * setting.t;
        this.pos.y = this.start.y * (1 - setting.t) + this.target.y * setting.t;
        this.draw()
    };
}

let balls = [];

function initBalls() {
    balls.length = 0;
    for (let i = 0; i < setting.ballNum; i++) {
        const hue = floor(random(100));
        const size = setting.sizeMax
        setting.sizeMax -= 0.1
        const ball = new Ball(hue, size);
        balls.push(ball);
    }
}

function setup() {
    createCanvas(innerWidth, innerHeight);
    noStroke();
    frameRate(60);
    colorMode(HSB, 100);
    // angleMode(DEGREES)
    background(0);
    initBalls();
}

function draw() {
    stats.begin();
    if (setting.isTail === "true") {
        background(0, 0.8);
    } else {
        clear();
        background(0);
    }
    balls.forEach((ball) => {
        ball.update();
    });
    stats.end();
}
